93:I[903690,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3-5v2zikwtdtn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3bu_pn69_2ac_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1lb6na2ocrfl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1zjw9h8eodvzb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2avjef50dmojk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3-5v2zikwtdtn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3bu_pn69_2ac_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1lb6na2ocrfl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1zjw9h8eodvzb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2avjef50dmojk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6"],"SWRDataProvider"] 95:T2f67,[V0_FILE]typescriptreact:file="components/process-tracker.tsx" isMerged="true" "use client" import { Check } from "lucide-react" import { cn } from "@/lib/utils" interface ProcessTrackerProps { steps: string[] currentStep: number } export function ProcessTracker({ steps, currentStep }: ProcessTrackerProps) { return (

{/* Desktop View - Horizontal Transit Map */} {/* Mobile View - Vertical Timeline */}

) } function DesktopView({ steps, currentStep }: ProcessTrackerProps) { return (

{/* The Track - Gray line running behind the nodes */}

{/* Progress overlay on the track */}

{/* Nodes container */}

{steps.map((step, index) => { const isCompleted = index < currentStep const isActive = index === currentStep return (

{/* The Node */}

{isCompleted ? ( ) : ( {index + 1} )}

{/* The Label - Absolutely positioned to prevent jank */} {step}

) })}

) } function MobileView({ steps, currentStep }: ProcessTrackerProps) { return (

{steps.map((step, index) => { const isCompleted = index < currentStep const isActive = index === currentStep const isLast = index === steps.length - 1 return (

{/* Vertical connecting line */} {!isLast && (

)} {/* The Node */}

{isCompleted ? ( ) : ( {index + 1} )}

{/* The Label */} {step}

) })}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { ProcessTracker } from "@/components/process-tracker" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" const demoSteps = ["Select", "Review", "Confirm"] const longLabelSteps = ["Start", "Awaiting Verification", "Complete"] export default function Home() { const [currentStep, setCurrentStep] = useState(0) const [currentStep2, setCurrentStep2] = useState(1) return (

ProcessTracker Component

A jank-free, responsive process visualization component

{/* Demo 1: Basic Steps */} Basic Example Simple 3-step process with short labels

{/* Demo 2: Long Labels (Anti-Jank Test) */} Long Labels Test Demonstrates the anti-jank behavior with varying text lengths

{/* Demo 3: All States */} All States Preview Visual comparison of different progress states

Step 0 (Start)

Step 1 (In Progress)

Step 2 (Final Step)

Step 3 (Completed)

) }89:["$","$L93",null,{"chatId":"vhXgeY0Mv16","children":["$","$L94",null,{"data":{"@\"active-block\",\"vhXgeY0Mv16\",":{"id":"b_IstX3BW6pVI","messageId":"loecEXdo4fSOYEKmZA2flFBykB8nMSkm","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Creating demo page","taskNameComplete":"Created demo page"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"vhXgeY0Mv16\",":false,"":null},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This